<template>
  <div>
    <div>
      <el-drawer
          title="名牌明细表!"
          :visible.sync="table"
          direction="rtl"
          size="50%">
        <el-button type="primary" @click="Detail">新增</el-button>
        <el-table :data="gridData">
          <el-table-column property="types_id" label="产品所属" width="150"></el-table-column>
          <el-table-column property="name" label="产品明细" width="200"></el-table-column>
          <el-table-column label="操作" >
            <template scope="scope">
              <el-button size="small" @click="Detailadd(scope.$index, scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="DetaileDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--    分页查询-->
        <el-col :span="24" class="toolbar">
          <el-pagination layout="prev, pager, next"
                         @current-change="detailChange"
                         :current-page="currrentPage"
                         :page-size="size"
                         :total="total"
                         style="float:right;">
          </el-pagination>
        </el-col>


      </el-drawer>

      <el-drawer
          title="我嵌套了 Form !"
          :before-close="handleClose"
          :visible.sync="dialog"
          direction="ltr"
          custom-class="demo-drawer"
          ref="drawer"
      >
        <div class="demo-drawer__content">
          <el-form :model="form">
            <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
          </div>
        </div>
      </el-drawer>
    </div>






<!--    分界线-->
    <div>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.keyword" placeholder="名牌名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="query">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="dictionarytype" @cell-dblclick="dblclick" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column   prop="sn" label="字典编号" width="120" sortable>
      </el-table-column>
      <el-table-column   prop="name" label="品牌名" width="120" sortable>
      </el-table-column>
      <el-table-column  v-if='false' prop="id" hidden="true" label="id" width="120" sortable>
      </el-table-column>
<!--      <el-table-column prop="age" label="年龄" width="100" sortable>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="birth" label="生日" width="120" sortable>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="addr" label="地址" min-width="180" sortable>-->
<!--      </el-table-column>-->
      <el-table-column label="操作" >
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--工具条-->
<!--    分页查询-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>

      <el-pagination layout="prev, pager, next"
                     @current-change="handleCurrentChange"
                     :current-page="currrentPage"
                     :page-size="size"
                     :total="total"
                     style="float:right;">
      </el-pagination>
    </el-col>

    <!--编辑界面-->
<!--    rules="editFormRules" ref="editForm"
rules ：表单规则，  ref：为这里设置一个id引用 其他地方可以i直接引入
-->
    <el-dialog :title="title" :visible.sync="editFormVisible" :close-on-click-modal="false">
<!--      :model="editForm" 双向绑定了修改的框-->
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForme">

        <el-form-item label="名牌名称" prop="name">
          <el-input v-model="editForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="名牌编号" prop="sn">
          <el-input v-model="editForm.sn" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="id" prop="id" hidden="hidden">
          <el-input v-model="editForm.id" auto-complete="off"></el-input>
        </el-form-item>
<!--        <el-form-item label="部门地址" prop="dirPath">-->
<!--          <el-input v-model="editForm.dirPath" auto-complete="off"></el-input>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>


<!--detaile 编辑页面-->
      <el-dialog :title="title" :visible.sync="detaileVisible" :close-on-click-modal="false">
        <!--      :model="editForm" 双向绑定了修改的框-->
        <el-form :model="detaileForm" label-width="80px"  ref="editForme">

          <el-form-item label="明细名称" prop="name">
            <el-input v-model="detaileForm.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="明细类型" prop="sn">
            <el-input v-model="detaileForm.types_id" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="id" prop="id" hidden="hidden">
            <el-input v-model="editForm.id" auto-complete="off"></el-input>
          </el-form-item>
          <!--        <el-form-item label="部门地址" prop="dirPath">-->
          <!--          <el-input v-model="editForm.dirPath" auto-complete="off"></el-input>-->
          <!--        </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="detaileVisible = false">取消</el-button>
          <el-button type="primary" @click.native="detaileSubmit" :loading="editLoading">提交</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      table: false,
      dialog: false,
      loading: false,
      gridData:[],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '80px',
      timer: null,
      filters: {
        keyword: ''
      },
      dictionarytype: [],
      Empleoyee:[],
      total: 0, // 总条数
      currrentPage: 1, // 当前页
      size:5,//查询条数
      depts:[],
      listLoading: false,
      sels: [],//列表选中列
      title:'',
      editFormVisible: false,//编辑界面是否显示 // 编辑修改放一起使用
      detaileVisible:false,
      editLoading: false,
      editFormRules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ],
        sn: [
          { required: true, message: '请输入部门编号', trigger: 'blur' }
        ]
      },
      //编辑界面数据
      editForm: {
        id: 0,
        name: '',
        sn:'',
      },
      detaileForm:{
        id: 0,
        name: '',
        types_id:'',
      }
      // addFormVisible: false,//新增界面是否显示
      // addLoading: false,
      // addFormRules: {
      //   name: [
      //     { required: true, message: '请输入姓名', trigger: 'blur' }
      //   ]
      // },
      // // 新增界面数据
      // addForm: {
      //   id: null,
      //   name: '',
      //   sn:'',
      //   dirPath:'',
      //   state:0,
      //   manager:null,
      //   parent:null,
      // }

    }
  },
  methods: {
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗？')
          .then(_ => {
            this.loading = true;
            this.timer = setTimeout(() => {
              done();
              // 动画关闭需要一定的时间
              setTimeout(() => {
                this.loading = false;
              }, 400);
            }, 2000);
          })
          .catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    // 表格点击事件  打开抽屉组件
    dblclick(row, column, cell, event){
      let data=JSON.parse(JSON.stringify(row))
     this.table=true;
      let para = {
        id:data.id,
        currrentPage: this.currrentPage,
        size:this.size,
        // 分页查询的参数
        keyword: this.filters.keyword
      };
      // console.log(id)
      console.log(para)
      this.$http.post("detail",para).then(result=>{
        console.log(result)
        result=result.data
        this.gridData=result.row
      })

    },
    handleCurrentChange(val) {
      // 分页查询按钮绑定
      // 修改当前页去去查询
      this.currrentPage = val;
      this.getdictionarytype();
    },
    query(){
      this.currrentPage=1
      this.getDepartments()

    },
    detailChange(val){
      this.currrentPage = val;
      this.getdictionarytype();
    },

    //获取用户列表
    getdictionarytype() {
      //  1.封装后端需要的参数
      let para = {
        currrentPage: this.currrentPage,
        size:this.size,
        // 分页查询的参数
        keyword: this.filters.keyword
      };
      // 2.开启忙加载框
      this.listLoading = true;
      // 3.发送ajax请求
      this.$http.post("/dic",para).then(result=>{
        console.log(result.data)
        //发送后关闭忙加载框
        this.listLoading=false;
        // console.log(result)
          result=result.data
        this.dictionarytype=result.row
        this.total=result.total
      }).catch(result=>{
        this.$message({
          message: '操作失败',
          type: 'error'
        });
      })
      //NProgress.start();
      // getUserListPage(para).then((res) => {
      //   this.total = res.data.total;
      //   this.Departments = res.data.Departments;
      //   this.listLoading = false;
      //   //NProgress.done();
      // });
    },


    //detail删除
    //删除
    DetaileDelete: function (index, row) {

      let data=JSON.parse(JSON.stringify(row))
      console.log(data)
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning',
      }).then(() => {
        //开启忙等框
        this.listLoading = true;
        let that= this.table
        this.$http.delete("/detail/"+data.id).then(result=>{
          result=result.data
          if (result.success){
            this.$message({
              message: '删除成功',
              type: 'success',

            });
            that=false,
            //删除成功设置
            //关闭忙等框 设置第一页并刷新

            this.listLoading = false;
            this.currrentPage=1,
                this.getDepartments();
          } else {
            this.$message({
              message: '删除失败',
              type: 'error'
            });
          }
        }).catch(result=>{
          // 取消什么都不做
        });
      }).catch(() => {

      });


      // this.$confirm('确认删除该记录吗?', '提示', {
      //   type: 'warning'
      // }).then(() => {
      //   this.listLoading = true;
      //   //NProgress.start();
      //   let para = { id: row.id };
      //   removeUser(para).then((res) => {
      //     this.listLoading = false;
      //     //NProgress.done();
      //     this.$message({
      //       message: '删除成功',
      //       type: 'success'
      //     });
      //     this.getDepartments();
      //   });
      // }).catch(() => {
      //
      // });
    },

    //删除
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        //开启忙等框
        this.listLoading = true;
        this.$http.delete("/dic/"+row.id).then(result=>{
          result=result.data
          if (result.success){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            //删除成功设置
            //关闭忙等框 设置第一页并刷新
            this.listLoading = false;
            this.currrentPage=1,
                this.getdictionarytype();
          } else {
            this.$message({
              message: '删除失败',
              type: 'error'
            });
          }
        }).catch(result=>{
          // 取消什么都不做
        });
      }).catch(() => {

      });

    },
    Detail(){
      this.title='新增'
      // this.addFormVisible = true;2
      // 开启模态框
      this.detaileVisible = true;
      this.detaileForm = {
        id: null,
        name: '',
        types_id:'',
      };
    },
    //显示编辑界面 /编辑界面是否显示 // 编辑修改放一起使用
    Detailadd: function (index, row) {
      this.title='编辑'
      this.detaileVisible = true;
      // 这里的Object.assign({}, row)的意思克隆将row对象的值赋值给editForm
      // 使用克隆的原因是因为双向绑定 如果修改了取消那么当前行的数据因为双向绑定就一样改变！！！
      this.detaileForm = Object.assign({}, row);
      // 这里修改数据回显
      if (this.detaileForm.parent){
        //不为空说明有上级部门
        let arr=this.editForm.dirPath.split("/");
        let Dirpath=[]
        //  ["", "2", "7"] 去除两端 因为前面是空后面是自己
        for (let i= 1;i<=arr.length-2;i++){
          Dirpath.push(parseInt(arr[i]))
        }

      }


    },





    //显示编辑界面 /编辑界面是否显示 // 编辑修改放一起使用
    handleEdit: function (index, row) {
      this.title='编辑'
      this.editFormVisible = true;
      // 这里的Object.assign({}, row)的意思克隆将row对象的值赋值给editForm
      // 使用克隆的原因是因为双向绑定 如果修改了取消那么当前行的数据因为双向绑定就一样改变！！！
      this.editForm = Object.assign({}, row);
      // 这里修改数据回显
      if (this.editForm.parent){
        //不为空说明有上级部门
        let arr=this.editForm.dirPath.split("/");
        let Dirpath=[]
      //  ["", "2", "7"] 去除两端 因为前面是空后面是自己
        for (let i= 1;i<=arr.length-2;i++){
          Dirpath.push(parseInt(arr[i]))
        }
        this.editForm.parent=Dirpath
        // console.log(this.editForm.dirPath)
      }

    },
    //显示新增界面 为新增清零
    handleAdd: function () {
      this.title='新增'
      // this.addFormVisible = true;2
      // 开启模态框
      this.editFormVisible = true;
      this.editForm = {
        id: null,
        name: '',
        sn:'',
      };
    },
    // 详情提交按钮
    detaileSubmit:function (){
      //  this.$refs查找全部ref引用
      // this.$refs.editForm 从全部查找中查找editForm引用
      // validate二次检验 是否判断
      this.$refs.editForme.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            //NProgress.start();
            // 克隆当前表单的值到para
            let para = Object.assign({}, this.detaileForm);
            console.log(para)
            this.$http.put("/detail",para).then(result=>{
              result=result.data
              if (result.success){
                this.$message({
                  message: '操作成功',
                  type: "success"
                });
                this.editFormVisible = false;
                this.table=true;
                // 跳转首页
                // this.currrentPage=1
                // this.getdictionarytype()
              }else {
                this.$message({
                  message: '操作失败',
                  type: "error"
                });
              }

            }).catch(result=>{
              this.editLoading = false;
              this.$message({
                message: '系统错误',
                type: "error"
              });
            })

          });
        }
      });
    },
    //编辑 提交按钮
    editSubmit: function () {
      //  this.$refs查找全部ref引用
      // this.$refs.editForm 从全部查找中查找editForm引用
      // validate二次检验 是否判断
      this.$refs.editForme.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            //NProgress.start();
            // 克隆当前表单的值到para
            let para = Object.assign({}, this.editForm);
            console.log(para)
            // 开启按钮忙等框
            this.editLoading = true;
            this.$http.put("/dic",para).then(result=>{
              result=result.data
              if (result.success){
                this.$message({
                  message: '操作成功',
                  type: "success"
                });
                // 关闭按钮忙等狂
                this.editLoading = false;
                this.editFormVisible = false;; // 关闭模态框
                // 跳转首页
                this.currrentPage=1
                this.getdictionarytype()
              }else {
                this.$message({
                  message: '操作失败',
                  type: "error"
                });
              }

            }).catch(result=>{
              this.editLoading = false;
              this.$message({
                message: '系统错误',
                type: "error"
              });
            })

          });
        }
      });
    },
    // //新增
    // addSubmit: function () {
    //   this.$refs.addForm.validate((valid) => {
    //     if (valid) {
    //       this.$confirm('确认提交吗？', '提示', {}).then(() => {
    //         this.addLoading = true;
    //         //NProgress.start();
    //         let para = Object.assign({}, this.addForm);
    //         para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
    //         addUser(para).then((res) => {
    //           this.addLoading = false;
    //           //NProgress.done();
    //           this.$message({
    //             message: '提交成功',
    //             type: 'success'
    //           });
    //           this.$refs['addForm'].resetFields();
    //           this.addFormVisible = false;
    //           this.getDepartments();
    //         });
    //       });
    //     }
    //   });
    // },
    selsChange: function (sels) {
      // console.log(sels)
      this.sels = sels;
    },

    //批量删除
    batchRemove: function () {
      var ids = this.sels.map(item => item.id)//.toString();
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => { // 点击确认按钮
        this.listLoading = true;
        this.$http.patch("/dept",ids).then(result=>{
          result=result.data
          this.listLoading = false; // 关闭模态框
          if (result.success){
            this.$message({
              message: '删除成功',
              type: "success"
            });
            // 跳转首页
            this.currrentPage=1
            this.getDepartments()
          }else {
            this.$message({
              message: '删除失败',
              type: "error"
            });
          }
        }).catch(result=>{ // 发送失败
          this.$message({
                message: '系统错误',
                type: result.message
              });
        })
        // //NProgress.start();
        // let para = { ids: ids };
        // batchRemoveUser(para).then((res) => {
        //   this.listLoading = false;
        //   //NProgress.done();
        //   this.$message({
        //     message: '删除成功',
        //     type: 'success'
        //   });
        //   this.getDepartments();
        // });
      }).catch(() => { // 点击取消

      });
    },

  },
  mounted() {
    setTimeout(()=>{
      //这里就写你要执行的语句即可，先让数据库的数据加载进去数组中你在从数组中取值就好了
      this.getdictionarytype();
    },800)

  }
}

</script>

<style scoped>

</style>